<template>
  <div>
    <div class="header">
      <div class="logo">
        <!-- <img src="../assets/tq1.png" alt="" class="tq1" /> -->
      </div>
      <div class="r">
        <div class="r1" @click="home">{{ $t("首页") }}</div>
        <div class="r1" @click="wj" v-if="$store.state.userInfoK.uid!=''">{{ $t("问卷") }}</div>
        <div class="r1" @click="zy">{{ $t("中文/English") }}</div>
        <!-- <div class="r1">{{ $t('关于我们') }}</div> -->
        <!-- <div class="r1">{{ $t('质量保证') }}</div> -->
        <!-- <div class="r1">{{ $t('服务') }}</div> -->
        <div v-if="$store.state.userInfoK.uid!=''" class="r1" @click="goToProfile">
          {{ $store.state.userInfoK.nick_name }}
        </div>
        <div v-else class="r1" @click="login" style="cursor: pointer">
          {{ $t("登录") }}
        </div>
      </div>
    </div>
    <div class="homeOdf">
      <div class="f1">
        <div class="title">
          <img src="../assets/组 1 拷贝@2x.png" alt="" />
          {{ $t("您的统计数据") }}
        </div>
        <div class="content" v-for="(item, index) in source" :key="index">
          {{ $t(item) }}
        </div>
      </div>
      <div class="f2">
        <div class="q1">{{ $t("账户信息") }}</div>
        <div class="q2">{{ $t("成员ID：") + user.uid }}</div>
        <div class="q3">
          <div class="q3-1">
            <div class="q3-1-1">{{ $t("您的昵称") }}</div>
            <div class="q3-1-2">
              <input
                type="text"
                v-model="user.nick_name"
                class="q3-1-2-input"
              />
            </div>
          </div>
          <!-- <div class="q3-1">
                    <div class="q3-1-1">{{ $t('你的姓') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div> -->
        </div>
        <!-- <div class="q3 q4">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('电子邮件地址') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div> -->
        <!-- <div class="q5">
                <div class="q3-1">{{ $t('是否在收件箱中接收报价通知？') }}</div>
                <div class="q5-2">
                    <input type="radio" name="q5" id="q5-1" class="q5-2-input" />
                    <label for="q5-1" class="q5-2-label">{{ $t('是') }}</label>
                    <input type="radio" name="q5" id="q5-2" class="q5-2-input" />
                    <label for="q5-2" class="q5-2-label">{{ $t('否') }}</label>
                </div>
            </div> -->

        <div class="q7">
          <div class="q7-1" @click="updateUserInfo">{{ $t("更新帐户信息") }}</div>
        </div>

        <div class="q7">
          <div class="q7-1" @click="Logout">{{ $t("退出登录") }}</div>
        </div>
        <!-- <div class="q8">
                <div class="title">
                    <div class="title-1">{{ $t('电子邮件&通知设置') }}</div>
                    <div class="title-2">{{ $t('返回页首') }}</div>
                </div>
            </div> -->
        <!-- <div class="q9">
                <div class="q9-1">
                    <input type="checkbox" name="q9" id="q9-1" class="q9-1-input" />
                    <label for="q9-1" class="q9-1-label">{{ $t('接收新闻和账户对账单') }}</label>
                </div>
                <div class="q9-1">
                    <input type="checkbox" name="q9" id="q9-1" class="q9-1-input" />
                    <label for="q9-1" class="q9-1-label">{{ $t('获得独家优惠和调查收入机会') }}</label>
                </div>
                <div class="q9-1">
                    <input type="checkbox" name="q9" id="q9-1" class="q9-1-input" />
                    <label for="q9-1" class="q9-1-label">{{ $t('接收贷记通知') }}</label>
                </div>

            </div>
            <div class="q8">
                <div class="title">
                    <div class="title-1">{{ $t('Paypal信息') }}</div>
                    <div class="title-2">{{ $t('返回页首') }}</div>
                </div>
            </div>
            <div class="q3 q4">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('Paypal电子邮件') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                    <div class="q3-1-3">{{ $t('如果您想领取Paypal奖励，则需要您的Paypal电子邮件。') }}</div>
                </div>
            </div>
            <div class="q3 q4">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('Paypal电子邮件') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div>
            <div class="q8">
                <div class="title">
                    <div class="title-1">{{ $t('更新个人资料问卷') }}</div>
                    <div class="title-2">{{ $t('返回页首') }}</div>
                </div>
            </div>
            <div class="q3 q4 q10">
                <div class="q3-1">
                    <div class="q3-1-3">{{ $t('您的个人资料只能每30天更新一次。') }}</div>
                    <div class="q3-1-3">{{ $t('您的个人资料不能当前更新。') }}</div>
                </div>
            </div>
            <div class="q8">
                <div class="title">
                    <div class="title-1">{{ $t('运送信息') }}</div>
                    <div class="title-2">{{ $t('返回页首') }}</div>
                </div>
            </div>
            <div class="q11">
                <div class="q11-1">{{ $t('请不要缩短您的城市、州或县的名称。需要此信息才能为您寄送奖品。') }}</div>
            </div>
            <div class="q3">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('名字') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('姓氏') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div>
            <div class="q3 q4">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('街道地址') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div>
            <div class="q3 q4">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('地址2（公寓、套房、楼层-可选）') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div>
            <div class="q3 q4">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('城市/城镇') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div>
            <div class="q3">
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('国家') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
                <div class="q3-1">
                    <div class="q3-1-1">{{ $t('邮政编码') }}</div>
                    <div class="q3-1-2">
                        <input type="text" class="q3-1-2-input" />
                    </div>
                </div>
            </div>
            <div class="q7">
                <div class="q7-1">{{ $t('更新发货信息') }}</div>
            </div> -->
      </div>
      <div class="f3">
        <div class="title">{{ $t("账户设置") }}</div>
        <div class="content" v-for="value in source2" :key="value">
          {{ $t(value) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useStore } from "vuex";
import { userInfo2123, saveUserInfo } from "../api/index";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const i18n = useI18n();
const source = ref([
  t("当前积分余额"),
  t("今天获得的积分"),
  t("昨天获得的积分"),
  t("本月获得的积分"),
  t("今年获得的积分"),
  t("终身积分"),
  t("已领取奖励"),
  t("推荐总数"),
  t("推荐总数"),
  t("今日推荐积分"),
]);
const source2 = ref([
  t("我的信息"),
  t("密码"),
  t("邮件设置"),
  t("付款"),
  t("更新资料"),
  t("配送"),
]);
const router = useRouter();
const Store = useStore();
const currentLanguage = computed(() => Store.getters.currentLanguage);

const getCurrentText = (zh, en) => (currentLanguage.value === "zh" ? zh : en);
const updateUserInfo = async () => {
  try {
    const response = await saveUserInfo({
      nick_name: user.value.nick_name,
    });
    ElMessage.success({
      message: t("更新帐户信息成功!"),
      offset: 100,
      duration: 5000,
    });
    let info2 = await userInfo2123();

    Store.state.userInfoK = info2.data;
  } catch (error) {
    ElMessage.error({
      message: t("更新帐户信息失败，请重试"),
      offset: 100,
      duration: 5000,
    });
  }
};
const Logout = async () => {
  localStorage.removeItem("token")
  localStorage.removeItem("uid")
  router.push("/login");
  ElMessage.success({
    message: t("退出登录成功"),
    offset: 100,
    duration: 5000,
  });
}

const user = ref({
  uid: "",
  nick_name: "",
  username: "",
});
userInfo2123().then((res) => {
  user.value = res.data;
  localStorage.setItem('userInfo', JSON.stringify(res.data));
});


const home = () => {
  router.push("/home");
};
const wj = () => {
  router.push("/homepage");
};
const zy = () => {
  // i18n.locale.value
  if (i18n.locale.value === "zh") {
    i18n.locale.value = "en";
    cookie.set("localLang", "en");
    location.reload();
  } else {
    i18n.locale.value = "zh";
    cookie.set("localLang", "zh");
    location.reload();
  }
};
const goToProfile = () => {
  router.push("/user");
};
const login = () => {
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.header {
  padding: 30px 100px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(#409eff, 0.8);
  color: #fff;
  .logo {
    width: 163px;
    height: 67px;
    img {
      width: 100%;
    }
  }
  .r {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .r1 {
      font-family: Arial, Arial;
      font-weight: normal;
      font-size: 25px;
      margin: 0 31px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}
.homeOdf {
  padding: 46px 300px;
  display: flex;
  justify-content: space-between;
  .q3-12 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .f1 {
    width: 20%;

    .title {
      display: flex;
      align-items: center;
      font-family: ArialMT;
      padding: 14px 11px;
      background: #e9ebed;
      border-radius: 10px 10px 0 0;
      font-size: 13px;
      color: #000000;

      img {
        width: 14px;
        height: 11px;
        margin-right: 4px;
      }
    }

    .content {
      border-top: 1px solid #e9ebed;
      border-right: 1px solid #e9ebed;
      border-bottom: 1px solid #e9ebed;
      padding: 14px 11px;
    }
  }

  .f2 {
    width: 40%;

    .q1 {
      font-family: Arial, Arial;
      font-weight: normal;
      font-size: 33px;
      color: #000000;
      border-bottom: 1px solid #bebebe;
      padding-bottom: 15px;
    }

    .q2 {
      font-family: Arial, Arial;
      font-weight: normal;
      font-size: 15px;
      color: #303030;
      padding: 15px 0;
    }

    .q3 {
      display: flex;
      justify-content: space-between;
      padding-top: 20px;

      .q3-1 {
        width: 48%;

        .q3-1-1 {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 14px;
          color: #303030;
        }

        .q3-1-2 {
          margin-top: 10px;

          .q3-1-2-input {
            width: 100%;
            height: 32px;
            background: #ffffff;
            border-radius: 6px 6px 6px 6px;
            border: 2px solid #0075df;
            padding: 10px;
            box-sizing: border-box;
          }
        }
      }
    }

    .q4 {
      .q3-1 {
        width: 100%;
      }

      .q3-1-3 {
        margin-top: 15px;
        font-family: ArialMT;
        font-size: 11px;
        color: #434343;
      }
    }

    .q5 {
      padding-top: 20px;

      .q3-1 {
        font-family: Arial, Arial;
        font-weight: normal;
        font-size: 14px;
        color: #313131;
      }

      .q5-2 {
        margin-top: 15px;

        .q5-2-input {
          margin-right: 10px;
        }

        .q5-2-label {
          margin-right: 10px;
        }
      }
    }

    .q6 {
      padding-top: 20px;

      .q6-1 {
        font-family: Arial, Arial;
        font-weight: normal;
        font-size: 14px;
        color: #303030;

        .q6-1-span {
          color: #ff0000;
          margin-left: 13px;
        }
      }

      .q3-1-2-input {
        width: 100%;
        height: 32px;
        background: #ffffff;
        border-radius: 6px 6px 6px 6px;
        border: 2px solid #0075df;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 10px;
      }
    }

    .q7 {
      padding-top: 20px;
      padding-bottom: 30px;
      display: flex;

      .q7-1 {
        padding: 11px 15px;
        background: #0075df;
        border-radius: 6px 6px 6px 6px;

        font-family: ArialMT;
        font-size: 14px;
        color: #ffffff;
      }
    }

    .q8 {
      padding-top: 30px;
      border-top: 1px solid #bebebe;

      .title {
        display: flex;
        justify-content: space-between;

        .title-1 {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 25px;
          color: #000000;
        }

        .title-2 {
          font-family: ArialMT;
          font-size: 11px;
          color: #595959;
        }
      }
    }

    .q9 {
      padding-top: 20px;

      .q9-1 {
        margin-bottom: 15px;

        .q9-1-input {
          width: 13px;
          height: 13px;
        }

        .q9-1-label {
          font-family: ArialMT;
          font-size: 12px;
          color: #434343;
          margin-left: 10px;
        }
      }
    }

    .q10 {
      padding-bottom: 30px;
    }

    .q11 {
      padding-top: 20px;

      .q11-1 {
        font-family: ArialMT;
        font-size: 11px;
        color: #7c7c7c;
      }
    }
  }

  .f3 {
    width: 20%;

    .title {
      font-family: Arial, Arial;
      font-weight: normal;
      font-size: 15px;
      color: #000000;
      padding-bottom: 13px;
    }

    .content {
      padding: 14px 30px;
      background: #ededed;
      border-radius: 2px 2px 2px 2px;
      margin-bottom: 5px;
    }
  }
}
</style>